<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <Header :todos="todos" :addTodo="addTodo" />
      <Main :todos="todos" :checkTodo="checkTodo" :removeTodo="removeTodo" />
      <Footer
        :todos="todos"
        :checkAllTodo="checkAllTodo"
        :removeAllCompTodo="removeAllCompTodo"
      />
    </div>
  </div>
</template>

<script>
import { nanoid } from 'nanoid';

//导入顶部组件
import Header from "./components/Header";
import Main from "./components/Main";
import Footer from './components/Footer';
export default {
  data() {
    return {
      todos: [
        { id: 1, title: "写作业", done: false }, // done 完成   true 已完成  false 未完成
        { id: 2, title: "买彩票", done: false },
        { id: 3, title: "五黑", done: true },
        { id: "12fafafaefa", title: "买彩票", done: true },
      ],
    };
  },
  name: "App",
  components: {
    Header,
    Main,
    Footer,
  },
  methods:{
    addTodo(title){
        let id = nanoid();
        //创建一个新的对象
        let newTodo = {id, title, done:false};
        //更新 state 中 todos 的值
        this.todos.push(newTodo)
    },
    checkTodo (id, status){
        //map 方法
        let todos = this.todos.map(item => {
            if(item.id === id){
                item.done = !status;
            }
            
            return item;
        });
        
       this.todos=todos;
    },
    removeTodo(id){
      let todos= this.todos.filter(item => item.id !== id);
      this.todos=todos;
    },
    checkAllTodo(status){
      let newTodo=this.todos.map(
        item=>{
          item.done=status;
          return item;
        }
      )
      this.todos=newTodo;
    },
    removeAllCompTodo(){
      let todos= this.todos.filter(item => !item.done);
      this.todos=todos;
    }

  }
};
</script>

<style>
.todo-container {
  width: 600px;
  margin: 0 auto;
}

.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.btn-danger {
    color: #fff;
    background-color: #da4f49;
    border: 1px solid #bd362f;
}

.btn-danger:hover {
    color: #fff;
    background-color: #bd362f;
}

.btn:focus {
    outline: none;
}
</style>
